<script setup lang="ts">

import { getProductList } from '@/api/product';
import { usePaging } from '@/hooks/pagination';
import { useRouter } from 'vue-router';
const router = useRouter()
const { loadData, total, queryParams, setQueryParms } = usePaging()

import { useDict } from '@/hooks/dict';
useDict("loan_term", "service_area", "approval_type", "loan_limit", "guarantee_type")
setQueryParms({
  isGovernment: 1
})

import type { Product as ProductType } from '@/types/product';
const productList = ref<ProductType[]>([])
onMounted(() => {
  getData()
})

function getData() {
  loadData(getProductList).then(res => {
    productList.value = res.rows
  })
}


function handleDetail(id: string) {
  router.push({ path: `/financial-products/${id}` });
}
</script>

<template>
  <div>
    <img src="@/assets/images/banner.jpg" class="w-full" alt="">
    <div class="w-1200 m-auto">
      <div class="flex mt-15 gap-10 flex-wrap">
        <Product v-for="(item, i) in productList" :key="i" @click="handleDetail(item.id)" :item="item"></Product>
      </div>



      <div class="mt-15 pb-20 flex justify-center">
        <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.pageNum"
          @change="getData" v-model:page-size="queryParams.pageSize" :total="total" />
      </div>
    </div>
  </div>
</template>
